<template>
	<div>
		<!-- 快递网点选择器 -->
		<el-dialog v-model="courierDialog" title="请选择" @closed="cancelCourier" width="70%">
			<template #header>
				<div style="margin-top: 40px">
					<span>请选择</span>
					<div class="dialog-footer" style="float: right">
						<el-button type="primary" @click="confirmCourier">确认</el-button>
					</div>
				</div>
			</template>
			<div class="handle-box">
				<el-input v-model="courierQuery.name" placeholder="姓名" class="handle-input mr10"></el-input>
				<el-input v-model="courierQuery.phone" placeholder="账号(手机号码)" class="handle-input mr10"></el-input>
				<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
			</div>
			<el-table ref="courierTableRef" style="width: 100%" :data="courierData" @current-change="handleCourierChange" @select="selectCourier" highlight-current-row>
				<el-table-column type="selection" width="55"/>
				<el-table-column property="name" label="姓名"/>
				<el-table-column property="phone" label="手机号码"/>
				<el-table-column property="createTime" label="注册时间"/>
			</el-table>
			<div class="pagination">
				<el-pagination
						background
						layout="total, prev, pager, next"
						:current-page="courierQuery.pageNum"
						:page-size="courierQuery.pageSize"
						:page-count="courierQuery.page"
						:total="courierQuery.total"
						@current-change="handlePageChange"/>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';
import { getWebUserListApi } from '../api/index';
import { Search } from '@element-plus/icons-vue';
// 定义派发事件
const emit = defineEmits(['selectedCourier']);
const courierDialog = ref(false);
const courierQuery = reactive({
	pageNum: 1,
	pageSize: 10,
	page: 1,
	total: 0,
	name: '',
	phone: '',
	outletId: undefined,
	role: undefined
});
const courierData = ref([]);
const courierTableRef = ref();
const selectedRow = ref();

// 获取表格数据
const getData = async () => {
	const result = await getWebUserListApi(courierQuery);
	if (result) {
		courierData.value = result.data.content;
		courierQuery.total = result.data.count;
	}
};
getData();

// 查询操作
const handleSearch = () => {
	courierQuery.pageNum = 1;
	// 清空数据
	cancelCourier();
	getData();
};
// 分页导航
const handlePageChange = (val: number) => {
	courierQuery.pageNum = val;
	getData();
};

const selectedCourier = (param: any) => {
};

// 网点单选切换
const handleCourierChange = (currentRow: any, unselectedRow: any) => {
	console.log(currentRow, unselectedRow);
	courierTableRef.value.toggleRowSelection(currentRow, true);
	courierTableRef.value.toggleRowSelection(unselectedRow, false);
	selectedRow.value = currentRow;
};
// 网点多选切换
const selectCourier = (selection: any, row: any) => {
	console.log("多选", selection, row);
	if (selection.length > 1) {
		let delRow = selection.shift();
		// 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
		courierTableRef.value.toggleRowSelection(delRow, false);
		courierTableRef.value.setCurrentRow(row);
		selectedRow.value = row;
	}
	// if (selection.length == 1) {
	// 	courierTableRef.value.setCurrentRow(row);
	// 	selectedRow.value = row;
	// }
};
// 网点确认
const confirmCourier = () => {
	console.log("confirmCourier",selectedRow.value);
	if (!selectedRow.value) {
		ElMessage.warning('请选择...');
		return;
	}
	// 调用父组件的selectedCourier方法
	emit('selectedCourier', selectedRow.value);

	// 清空数据
	cancelCourier();
};


// 取消网点选择
const cancelCourier = () => {
	courierDialog.value = false;
	selectedRow.value = undefined;
	courierTableRef.value.clearSelection();
	courierTableRef.value.setCurrentRow();
};

// 切换弹出框
const changeShow = (status: boolean, outletId: number) => {
	console.log("changeShow", status);
	courierQuery.outletId = outletId;
	// 快递员
	courierQuery.role = 1;
	getData();
	courierDialog.value = status;
};

// 切换弹出框
const changeShowByOutletManager = (status: boolean) => {
	console.log("changeShowByOutletManager", status);
	// 普通用户
	courierQuery.role = 0;
	getData();
	courierDialog.value = status;
};


defineExpose({
	changeShow,
	changeShowByOutletManager
})
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-form-item {
	font-size: 16px;
	font-weight: 700;
	color: var(--el-text-color-primary);
}

::v-deep(.el-table__header-wrapper .el-checkbox) {
	display:none
}
</style>
